<template>
  <div>
    <h2 class="box4">累计销量对比</h2>
    <div class="chart4" ref="chart4" id="chart4"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let dom = this.$refs['chart4'];
    let chart4 = echarts.init(dom);
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['键盘', '手机', '平板', '电脑']
      },
      series: [
        {
          name: '2018',
          type: 'bar',
          data: [18203, 23489, 29034, 104970]
        },
        {
          name: '2019',
          type: 'bar',
          data: [19325, 23438, 31000, 121594]
        }
      ]

    }
    chart4.setOption(option)
  }
}

</script>
<style lang="less">
.box4 {
  color: red;
  text-align: center;
}

.chart4 {
  height: 360px;
  background-color: red;
}
</style>